<template>
  <div class="property-panel">
    <!-- 面板头部 -->
    <div class="panel-header">
      <div class="header-title">
        <el-icon><Setting /></el-icon>
        <span>属性配置</span>
      </div>
      
      <el-button-group size="small">
        <el-button @click="resetProperties">
          <el-icon><RefreshLeft /></el-icon>
          重置
        </el-button>
        <el-button @click="copyProperties">
          <el-icon><DocumentCopy /></el-icon>
          复制
        </el-button>
      </el-button-group>
    </div>

    <!-- 组件信息 -->
    <div v-if="selectedComponent" class="component-info">
      <div class="info-row">
        <span class="info-label">组件类型:</span>
        <el-tag>{{ selectedComponent.type }}</el-tag>
      </div>
      <div class="info-row">
        <span class="info-label">组件ID:</span>
        <el-input
          v-model="selectedComponent.id"
          size="small"
          placeholder="组件ID"
        />
      </div>
    </div>

    <!-- 属性分组 -->
    <el-collapse v-model="activeGroups" class="property-groups">
      <!-- 基础属性 -->
      <el-collapse-item title="基础属性" name="basic">
        <div class="property-list">
          <div
            v-for="prop in basicProperties"
            :key="prop.name"
            class="property-item"
          >
            <div class="property-label">
              {{ prop.label }}
              <el-tooltip v-if="prop.tip" :content="prop.tip">
                <el-icon class="tip-icon"><QuestionFilled /></el-icon>
              </el-tooltip>
            </div>
            
            <div class="property-value">
              <!-- 文本输入 -->
              <el-input
                v-if="prop.type === 'text'"
                v-model="properties[prop.name]"
                :placeholder="prop.placeholder"
                size="small"
                @change="handlePropertyChange"
              />
              
              <!-- 数字输入 -->
              <el-input-number
                v-else-if="prop.type === 'number'"
                v-model="properties[prop.name]"
                :min="prop.min"
                :max="prop.max"
                :step="prop.step"
                size="small"
                @change="handlePropertyChange"
              />
              
              <!-- 开关 -->
              <el-switch
                v-else-if="prop.type === 'switch'"
                v-model="properties[prop.name]"
                @change="handlePropertyChange"
              />
              
              <!-- 选择器 -->
              <el-select
                v-else-if="prop.type === 'select'"
                v-model="properties[prop.name]"
                :placeholder="prop.placeholder"
                size="small"
                @change="handlePropertyChange"
              >
                <el-option
                  v-for="option in prop.options"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
                />
              </el-select>
              
              <!-- 颜色选择器 -->
              <el-color-picker
                v-else-if="prop.type === 'color'"
                v-model="properties[prop.name]"
                size="small"
                @change="handlePropertyChange"
              />
              
              <!-- 滑块 -->
              <el-slider
                v-else-if="prop.type === 'slider'"
                v-model="properties[prop.name]"
                :min="prop.min"
                :max="prop.max"
                @change="handlePropertyChange"
              />
            </div>
          </div>
        </div>
      </el-collapse-item>

      <!-- 样式属性 -->
      <el-collapse-item title="样式属性" name="style">
        <div class="property-list">
          <!-- 尺寸 -->
          <div class="property-group-title">尺寸</div>
          <div class="property-row">
            <div class="property-item half">
              <div class="property-label">宽度</div>
              <el-input
                v-model="styleProperties.width"
                placeholder="auto"
                size="small"
                @change="handleStyleChange"
              >
                <template #append>px</template>
              </el-input>
            </div>
            <div class="property-item half">
              <div class="property-label">高度</div>
              <el-input
                v-model="styleProperties.height"
                placeholder="auto"
                size="small"
                @change="handleStyleChange"
              >
                <template #append>px</template>
              </el-input>
            </div>
          </div>

          <!-- 边距 -->
          <div class="property-group-title">边距</div>
          <div class="margin-padding-editor">
            <div class="spacing-row">
              <span class="spacing-label">外边距</span>
              <div class="spacing-inputs">
                <el-input-number
                  v-model="styleProperties.marginTop"
                  :min="0"
                  size="small"
                  controls-position="right"
                  @change="handleStyleChange"
                />
                <el-input-number
                  v-model="styleProperties.marginRight"
                  :min="0"
                  size="small"
                  controls-position="right"
                  @change="handleStyleChange"
                />
                <el-input-number
                  v-model="styleProperties.marginBottom"
                  :min="0"
                  size="small"
                  controls-position="right"
                  @change="handleStyleChange"
                />
                <el-input-number
                  v-model="styleProperties.marginLeft"
                  :min="0"
                  size="small"
                  controls-position="right"
                  @change="handleStyleChange"
                />
              </div>
            </div>
            
            <div class="spacing-row">
              <span class="spacing-label">内边距</span>
              <div class="spacing-inputs">
                <el-input-number
                  v-model="styleProperties.paddingTop"
                  :min="0"
                  size="small"
                  controls-position="right"
                  @change="handleStyleChange"
                />
                <el-input-number
                  v-model="styleProperties.paddingRight"
                  :min="0"
                  size="small"
                  controls-position="right"
                  @change="handleStyleChange"
                />
                <el-input-number
                  v-model="styleProperties.paddingBottom"
                  :min="0"
                  size="small"
                  controls-position="right"
                  @change="handleStyleChange"
                />
                <el-input-number
                  v-model="styleProperties.paddingLeft"
                  :min="0"
                  size="small"
                  controls-position="right"
                  @change="handleStyleChange"
                />
              </div>
            </div>
          </div>

          <!-- 颜色 -->
          <div class="property-group-title">颜色</div>
          <div class="property-row">
            <div class="property-item half">
              <div class="property-label">背景色</div>
              <el-color-picker
                v-model="styleProperties.backgroundColor"
                @change="handleStyleChange"
              />
            </div>
            <div class="property-item half">
              <div class="property-label">文字色</div>
              <el-color-picker
                v-model="styleProperties.color"
                @change="handleStyleChange"
              />
            </div>
          </div>

          <!-- 边框 -->
          <div class="property-group-title">边框</div>
          <div class="property-row">
            <div class="property-item">
              <div class="property-label">边框样式</div>
              <el-select
                v-model="styleProperties.borderStyle"
                size="small"
                @change="handleStyleChange"
              >
                <el-option label="无" value="none" />
                <el-option label="实线" value="solid" />
                <el-option label="虚线" value="dashed" />
                <el-option label="点线" value="dotted" />
              </el-select>
            </div>
          </div>
          <div class="property-row">
            <div class="property-item half">
              <div class="property-label">边框宽度</div>
              <el-input-number
                v-model="styleProperties.borderWidth"
                :min="0"
                size="small"
                @change="handleStyleChange"
              />
            </div>
            <div class="property-item half">
              <div class="property-label">边框颜色</div>
              <el-color-picker
                v-model="styleProperties.borderColor"
                @change="handleStyleChange"
              />
            </div>
          </div>
          <div class="property-item">
            <div class="property-label">圆角</div>
            <el-slider
              v-model="styleProperties.borderRadius"
              :max="50"
              @change="handleStyleChange"
            />
          </div>
        </div>
      </el-collapse-item>

      <!-- 高级属性 -->
      <el-collapse-item title="高级属性" name="advanced">
        <div class="property-list">
          <div class="property-item">
            <div class="property-label">条件显示</div>
            <el-input
              v-model="advancedProperties.condition"
              placeholder="表达式，如: value > 0"
              size="small"
              @change="handleAdvancedChange"
            />
          </div>
          
          <div class="property-item">
            <div class="property-label">自定义类名</div>
            <el-input
              v-model="advancedProperties.className"
              placeholder="自定义CSS类名"
              size="small"
              @change="handleAdvancedChange"
            />
          </div>
          
          <div class="property-item">
            <div class="property-label">自定义样式</div>
            <el-input
              v-model="advancedProperties.customStyle"
              type="textarea"
              :rows="3"
              placeholder='{"key": "value"}'
              @change="handleAdvancedChange"
            />
          </div>
        </div>
      </el-collapse-item>

      <!-- 事件绑定 -->
      <el-collapse-item title="事件绑定" name="events">
        <div class="property-list">
          <div
            v-for="event in events"
            :key="event.name"
            class="event-item"
          >
            <div class="event-header">
              <span class="event-name">{{ event.label }}</span>
              <el-button
                text
                size="small"
                @click="toggleEventEditor(event.name)"
              >
                {{ eventHandlers[event.name] ? '编辑' : '添加' }}
              </el-button>
            </div>
            
            <transition name="slide-down">
              <div v-if="activeEvent === event.name" class="event-editor">
                <el-input
                  v-model="eventHandlers[event.name]"
                  type="textarea"
                  :rows="4"
                  :placeholder="`function(${event.params}) {\n  // 事件处理代码\n}`"
                  @change="handleEventChange"
                />
              </div>
            </transition>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>

    <!-- 代码视图 -->
    <div class="code-view">
      <el-button text @click="showCodeDialog = true">
        <el-icon><View /></el-icon>
        查看生成代码
      </el-button>
    </div>

    <!-- 代码对话框 -->
    <el-dialog
      v-model="showCodeDialog"
      title="生成的代码"
      width="800px"
    >
      <el-tabs v-model="codeTab">
        <el-tab-pane label="Vue模板" name="template">
          <pre class="code-block">{{ generatedTemplate }}</pre>
        </el-tab-pane>
        <el-tab-pane label="样式代码" name="style">
          <pre class="code-block">{{ generatedStyle }}</pre>
        </el-tab-pane>
        <el-tab-pane label="JSON配置" name="json">
          <pre class="code-block">{{ generatedJson }}</pre>
        </el-tab-pane>
      </el-tabs>
      <template #footer>
        <el-button @click="showCodeDialog = false">关闭</el-button>
        <el-button type="primary" @click="copyGeneratedCode">复制代码</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  Setting,
  RefreshLeft,
  DocumentCopy,
  QuestionFilled,
  View
} from '@element-plus/icons-vue'

const props = defineProps({
  selectedComponent: {
    type: Object,
    default: null
  }
})

const emit = defineEmits(['update:properties', 'update:style', 'update:events'])

const activeGroups = ref(['basic', 'style'])
const activeEvent = ref('')
const showCodeDialog = ref(false)
const codeTab = ref('template')

// 属性定义
const properties = ref({})
const styleProperties = ref({
  width: '',
  height: '',
  marginTop: 0,
  marginRight: 0,
  marginBottom: 0,
  marginLeft: 0,
  paddingTop: 0,
  paddingRight: 0,
  paddingBottom: 0,
  paddingLeft: 0,
  backgroundColor: '',
  color: '',
  borderStyle: 'none',
  borderWidth: 0,
  borderColor: '',
  borderRadius: 0
})
const advancedProperties = ref({
  condition: '',
  className: '',
  customStyle: ''
})
const eventHandlers = ref({})

// 基础属性配置
const basicProperties = computed(() => {
  if (!props.selectedComponent) return []
  
  const type = props.selectedComponent.type
  const baseProps = [
    { name: 'label', label: '标签', type: 'text', placeholder: '请输入标签' },
    { name: 'placeholder', label: '占位符', type: 'text', placeholder: '请输入占位符' }
  ]
  
  // 根据组件类型添加特定属性
  const typeProps = {
    'input': [
      { name: 'maxlength', label: '最大长度', type: 'number', min: 0 },
      { name: 'clearable', label: '可清空', type: 'switch' },
      { name: 'showPassword', label: '密码框', type: 'switch' }
    ],
    'select': [
      { name: 'multiple', label: '多选', type: 'switch' },
      { name: 'filterable', label: '可搜索', type: 'switch' },
      { name: 'clearable', label: '可清空', type: 'switch' }
    ],
    'button': [
      { name: 'type', label: '类型', type: 'select', options: [
        { label: '主要', value: 'primary' },
        { label: '成功', value: 'success' },
        { label: '警告', value: 'warning' },
        { label: '危险', value: 'danger' }
      ]},
      { name: 'size', label: '尺寸', type: 'select', options: [
        { label: '大', value: 'large' },
        { label: '默认', value: 'default' },
        { label: '小', value: 'small' }
      ]}
    ]
  }
  
  return [...baseProps, ...(typeProps[type] || [])]
})

// 事件配置
const events = [
  { name: 'click', label: '点击事件', params: 'event' },
  { name: 'change', label: '值改变', params: 'value' },
  { name: 'focus', label: '获得焦点', params: 'event' },
  { name: 'blur', label: '失去焦点', params: 'event' }
]

// 生成的代码
const generatedTemplate = computed(() => {
  if (!props.selectedComponent) return ''
  
  const attrs = Object.entries(properties.value)
    .map(([key, value]) => `  ${key}="${value}"`)
    .join('\n')
  
  const styles = generateStyleString()
  
  return `<${props.selectedComponent.type}
${attrs}
  :style="${styles}"
></${props.selectedComponent.type}>`
})

const generatedStyle = computed(() => {
  return generateStyleString()
})

const generatedJson = computed(() => {
  return JSON.stringify({
    type: props.selectedComponent?.type,
    properties: properties.value,
    style: styleProperties.value,
    advanced: advancedProperties.value,
    events: eventHandlers.value
  }, null, 2)
})

// 处理属性变化
const handlePropertyChange = () => {
  emit('update:properties', properties.value)
}

const handleStyleChange = () => {
  emit('update:style', styleProperties.value)
}

const handleAdvancedChange = () => {
  // 处理高级属性
}

const handleEventChange = () => {
  emit('update:events', eventHandlers.value)
}

// 重置属性
const resetProperties = () => {
  properties.value = {}
  styleProperties.value = {
    width: '',
    height: '',
    marginTop: 0,
    marginRight: 0,
    marginBottom: 0,
    marginLeft: 0,
    paddingTop: 0,
    paddingRight: 0,
    paddingBottom: 0,
    paddingLeft: 0,
    backgroundColor: '',
    color: '',
    borderStyle: 'none',
    borderWidth: 0,
    borderColor: '',
    borderRadius: 0
  }
  ElMessage.success('属性已重置')
}

// 复制属性
const copyProperties = async () => {
  try {
    await navigator.clipboard.writeText(generatedJson.value)
    ElMessage.success('属性已复制')
  } catch (error) {
    ElMessage.error('复制失败')
  }
}

// 切换事件编辑器
const toggleEventEditor = (eventName) => {
  activeEvent.value = activeEvent.value === eventName ? '' : eventName
}

// 生成样式字符串
const generateStyleString = () => {
  const styles = []
  
  if (styleProperties.value.width) styles.push(`width: ${styleProperties.value.width}px`)
  if (styleProperties.value.height) styles.push(`height: ${styleProperties.value.height}px`)
  
  if (styleProperties.value.marginTop) styles.push(`margin-top: ${styleProperties.value.marginTop}px`)
  if (styleProperties.value.marginRight) styles.push(`margin-right: ${styleProperties.value.marginRight}px`)
  if (styleProperties.value.marginBottom) styles.push(`margin-bottom: ${styleProperties.value.marginBottom}px`)
  if (styleProperties.value.marginLeft) styles.push(`margin-left: ${styleProperties.value.marginLeft}px`)
  
  if (styleProperties.value.paddingTop) styles.push(`padding-top: ${styleProperties.value.paddingTop}px`)
  if (styleProperties.value.paddingRight) styles.push(`padding-right: ${styleProperties.value.paddingRight}px`)
  if (styleProperties.value.paddingBottom) styles.push(`padding-bottom: ${styleProperties.value.paddingBottom}px`)
  if (styleProperties.value.paddingLeft) styles.push(`padding-left: ${styleProperties.value.paddingLeft}px`)
  
  if (styleProperties.value.backgroundColor) styles.push(`background-color: ${styleProperties.value.backgroundColor}`)
  if (styleProperties.value.color) styles.push(`color: ${styleProperties.value.color}`)
  
  if (styleProperties.value.borderStyle !== 'none') {
    styles.push(`border-style: ${styleProperties.value.borderStyle}`)
    styles.push(`border-width: ${styleProperties.value.borderWidth}px`)
    if (styleProperties.value.borderColor) styles.push(`border-color: ${styleProperties.value.borderColor}`)
  }
  
  if (styleProperties.value.borderRadius) styles.push(`border-radius: ${styleProperties.value.borderRadius}px`)
  
  return styles.join('; ')
}

// 复制生成的代码
const copyGeneratedCode = async () => {
  let code = ''
  if (codeTab.value === 'template') code = generatedTemplate.value
  else if (codeTab.value === 'style') code = generatedStyle.value
  else code = generatedJson.value
  
  try {
    await navigator.clipboard.writeText(code)
    ElMessage.success('代码已复制')
  } catch (error) {
    ElMessage.error('复制失败')
  }
}

// 监听选中组件变化
watch(() => props.selectedComponent, (newVal) => {
  if (newVal) {
    properties.value = { ...newVal.properties }
    styleProperties.value = { ...newVal.style }
  }
})
</script>

<style scoped>
.property-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-left: 1px solid #e5e7eb;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
}

.component-info {
  padding: 16px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 13px;
  color: #606266;
  min-width: 80px;
}

.property-groups {
  flex: 1;
  overflow-y: auto;
}

.property-list {
  padding: 12px;
}

.property-item {
  margin-bottom: 16px;
}

.property-item.half {
  width: calc(50% - 6px);
  display: inline-block;
  margin-right: 12px;
}

.property-item.half:nth-child(2n) {
  margin-right: 0;
}

.property-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #606266;
}

.tip-icon {
  color: #909399;
  cursor: help;
}

.property-value {
  width: 100%;
}

.property-row {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.property-group-title {
  font-size: 12px;
  color: #909399;
  margin: 20px 0 12px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.property-group-title:first-child {
  margin-top: 0;
}

.margin-padding-editor {
  background: #f9fafb;
  padding: 12px;
  border-radius: 6px;
}

.spacing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.spacing-row:last-child {
  margin-bottom: 0;
}

.spacing-label {
  font-size: 12px;
  color: #606266;
  min-width: 60px;
}

.spacing-inputs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  flex: 1;
}

.event-item {
  margin-bottom: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 6px;
}

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.event-name {
  font-size: 13px;
  color: #303133;
}

.event-editor {
  margin-top: 12px;
}

.code-view {
  padding: 16px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.code-block {
  background: #f5f5f5;
  padding: 16px;
  border-radius: 6px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  line-height: 1.6;
  overflow-x: auto;
}

.slide-down-enter-active,
.slide-down-leave-active {
  transition: all 0.3s;
}

.slide-down-enter-from,
.slide-down-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 滚动条 */
.property-groups::-webkit-scrollbar {
  width: 6px;
}

.property-groups::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}
</style>




































